<template>
  <div class="scenic-detail-modal">
    <!-- 景点基本信息 -->
    <div class="scenic-header">
      <div class="cover-image">
        <img :src="scenic.coverImage" :alt="scenic.scenicName" />
      </div>
      <div class="basic-info">
        <h2 class="scenic-name">{{ scenic.scenicName }}</h2>
        <div class="tags">
          <a-tag
            v-for="tag in scenic.tags || []"
            :key="tag"
            color="blue"
            style="margin-bottom: 8px"
          >
            {{ tag }}
          </a-tag>
        </div>
        <div class="location">
          <EnvironmentOutlined style="margin-right: 8px; color: #1890ff" />
          <span>经度: {{ scenic.scenicLongitude || '未设置' }}°</span>
          <a-divider type="vertical" />
          <span>纬度: {{ scenic.scenicLatitude || '未设置' }}°</span>
        </div>
        <div class="time-info">
          <ClockCircleOutlined style="margin-right: 8px; color: #52c41a" />
          <span>创建时间: {{ formatTime(scenic.createTime || '') }}</span>
        </div>
      </div>
    </div>

    <!-- 景点简介 -->
    <a-divider orientation="left">
      <FileTextOutlined style="margin-right: 8px" />
      景点简介
    </a-divider>
    <div class="scenic-brief">
      <p>{{ scenic.scenicBrief || '暂无简介' }}</p>
    </div>

    <!-- 游玩建议 -->
    <a-divider orientation="left">
      <BulbOutlined style="margin-right: 8px" />
      游玩建议
    </a-divider>
    <div class="scenic-tips">
      <a-alert
        :message="scenic.tips || '暂无游玩建议'"
        type="info"
        show-icon
        style="margin-bottom: 16px"
      />
    </div>

    <!-- 景点图片 -->
    <a-divider orientation="left">
      <PictureOutlined style="margin-right: 8px" />
      景点图片
    </a-divider>
    <div class="scenic-images">
      <div v-if="scenic.scenicImages && scenic.scenicImages.length > 0" class="image-gallery">
        <a-image-preview-group>
          <a-image
            v-for="(image, index) in scenic.scenicImages"
            :key="index"
            :src="image"
            :alt="`${scenic.scenicName}-图片${index + 1}`"
            class="image-item"
            :preview="{
              mask: h('div', { class: 'image-overlay' }, [h(EyeOutlined)]),
            }"
          />
        </a-image-preview-group>
      </div>
      <div v-else class="no-images">
        <a-empty description="暂无景点图片" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import {
  EnvironmentOutlined,
  ClockCircleOutlined,
  FileTextOutlined,
  BulbOutlined,
  PictureOutlined,
  EyeOutlined,
} from '@ant-design/icons-vue'

interface Props {
  scenic: API.ScenicVO
}

defineProps<Props>()

// 格式化时间
const formatTime = (timeString: string) => {
  if (!timeString) return '未知'
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}
</script>

<style scoped>
.scenic-detail-modal {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.scenic-header {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.cover-image {
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scenic-name {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.location,
.time-info {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.scenic-brief {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.scenic-brief p {
  margin: 0;
  line-height: 1.8;
  color: #333;
  text-align: justify;
  text-indent: 2em;
}

.scenic-tips {
  margin-bottom: 16px;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.image-gallery .ant-image {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

.image-gallery .ant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.image-gallery .ant-image:hover img {
  transform: scale(1.02);
}

.image-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  background: rgba(0, 0, 0, 0.5);
}

.no-images {
  padding: 20px;
  text-align: center;
  background: #fafafa;
  border-radius: 8px;
  border: 1px dashed #d9d9d9;
}

/* 滚动条样式 */
.scenic-detail-modal::-webkit-scrollbar {
  width: 6px;
}

.scenic-detail-modal::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.scenic-detail-modal::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.scenic-detail-modal::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .scenic-header {
    flex-direction: column;
  }

  .cover-image {
    width: 100%;
    height: 200px;
  }

  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .image-gallery .ant-image {
    height: 80px;
  }
}
</style>
